<template>
  <el-button type="primary" @click="handle">确认预览</el-button>
  <div style="height: 100%" id="action_2_9_2_card_customEvent"></div>
</template>

<script setup>

import {onMounted, ref,reactive} from "vue";
import _onUpdateData from "./action_2_8.data.json"
import {queryonUpdateDataFrom, queryResponseDataOnDatasets} from "@/utils/onUpdateDataUtils.js"
let $emit = defineEmits(["xxx"]);
const handle = () => {
  console.log("action_2_9_2_card_customEvent handle is called")
  $emit('xxx',previewcall)
}

const previewcall = (config,data,__onUpdateDatasetList) => {
  console.log("previewcall is called,config:", config, "data:", data)
  spreadSheet.update(config, data);
  if(__onUpdateDatasetList && __onUpdateDatasetList.length > 0){
    _onUpdateDatasetList=__onUpdateDatasetList
  }
}
let _onUpdateDatasetList=[];
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};

let spreadSheet =null;
onMounted(() => {
  spreadSheet =XZReport("#action_2_9_2_card_customEvent", option);
  //spreadSheet.update(props.config, props.data);
})

const onUpdateData = (datasets, params) => {
  console.log("action_2_9_2_card_customEvent datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
   resolve( queryonUpdateDataFrom(datasets,params,_onUpdateData))

  })
}
option.onUpdateData = onUpdateData


function onUpdateDatasetList() {
  console.log("action_2_9_2_card_customEvent onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
   resolve(_onUpdateDatasetList);

  })
}

option.onUpdateDatasetList = onUpdateDatasetList


</script>

